/* eslint-disable */
import moment from 'moment';
import Highcharts from 'highcharts';
// import { toFixed, toNonExponential } from '@/utils/validate';

export default {
  vueThis: null,
  newposChart: null,
  chartsData: {},
  bgcolor: '',
  lineTickColor: '',
  labelsColor: '',
  init (options) {
    this.vueThis = options.self;
    this.chartsData = options.data;
    // 样式配置
    this.bgcolor = options.theme === 'black' ? '#2c3859' : '#fff';
    this.lineTickColor = options.theme === 'black' ? '#7b8db9' : 'rgb(204, 214, 235)';
    this.gridLineColor = options.theme === 'black' ? 'rgb(255, 255, 255, 0.03)' : 'rgb(204, 214, 235, 0.3)';
    this.labelsColor = options.theme === 'black' ? '#7b8db9' : '#999';
    Highcharts.setOptions(this.highchartsTheme());
    // 生成图表
    this.newposChartAction();
  },

  newposChartAction() {
    const self = this;
    const selfVue = this.vueThis;
    // 深度实例化
    this.newposChart = new Highcharts.chart('newposChart', {
      chart: {
        backgroundColor: this.bgcolor,
        // zoomType: 'x',
        resetZoomButton: {
          text: '',
          position: {
            // align: 'right', // by default
            // verticalAlign: 'top', // by default
            // x: 0,
            // y: -30
          }
        }
      },
      credits: {
        enabled: false
      },
      title: {
        text: ''
      },
      subtitle: {
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          // millisecond: '%H:%M:%S.%L',
          // second: '%H:%M:%S',
          // minute: '%H:%M',
          // hour: '%H:%M',
          day: '%m/%d',
          // week: '%m-%d',
          // month: '%Y-%m-%d',
          // year: '%Y'
        },
        labels: {
          style: {
            color: self.labelsColor
          }
        },
        lineColor: self.lineTickColor,
        tickColor: self.lineTickColor,
      },
      yAxis: {
        // tickInterval: 7 * 24 * 3600 * 1000, // 坐标轴刻度间隔为一星期
        labels: {
          style: {
            color: self.labelsColor
          }
        },
        lineColor: self.lineTickColor,
        tickColor: self.lineTickColor,
        gridLineColor: self.gridLineColor,
        opposite: true,
        title: {
          text: `${selfVue.$t('newpos.RateReturn')}(%)`,
          style: {
            color: self.labelsColor,
            fontSize: '13px'
          }
        }
      },
      tooltip: {
        hideDelay: 0,
        headerFormat:'',
        shared: !0,
        formatter: function() {
          try {
            const time = this.points[0].x;
            const timeFormat = moment(time).format('YYYY-MM-DD');
            const persent = self.chartsData.find(v => v[0] === time);
            const html = '<b>'+selfVue.$t('tv.timeFormat')+'：'+ timeFormat +'</b><br/>' +
            '<b>'+selfVue.$t('tv.persent')+'：'+ persent[1] +'%</b><br/>';
            return html;
          } catch (error) {
            console.log(error);
          }
        },
        borderWidth: 1,
      },
      legend: {
        enabled: false
      },
      series: [{
        type: 'area',
        data: self.chartsData,
        // data: 
        // [
        //   [Date.UTC(1970, 10, 1), 0],
        //   [Date.UTC(1970, 10, 2), 0.6],
        //   [Date.UTC(1970, 10, 3), 0.7],
        //   [Date.UTC(1970, 10, 4), 0.8],
        //   [Date.UTC(1970, 10, 5), 0.6],
        //   [Date.UTC(1970, 10, 6), 0.6],
        //   [Date.UTC(1970, 10, 7), 0.67],
        //   [Date.UTC(1970, 10, 8), 0.81],
        //   [Date.UTC(1970, 10, 9), 0.78],
        //   [Date.UTC(1970, 10, 10), 0.88],
        //   [Date.UTC(1970, 10, 11), 0.98],
        //   [Date.UTC(1970, 10, 12), 0.8],
        //   [Date.UTC(1970, 10, 13), 1.78],
        //   [Date.UTC(1970, 10, 14), 2.78],
        //   [Date.UTC(1970, 10, 15), 1.78],
        //   [Date.UTC(1970, 10, 16), 5.78],
        //   [Date.UTC(1970, 10, 17), 5.78],
        //   [Date.UTC(1970, 10, 18), 5.78],
        //   [Date.UTC(1970, 10, 19), 5.78],
        //   [Date.UTC(1970, 10, 20), 5.78],
        //   // [Date.UTC(1970, 10, 21), 5.78],
        //   // [Date.UTC(1970, 10, 22), 5.78],
        //   // [Date.UTC(1970, 10, 23), 5.78],
        //   // [Date.UTC(1970, 10, 24), 5.78],
        //   // [Date.UTC(1970, 10, 25), 5.78],
        //   // [Date.UTC(1970, 10, 26), 5.78],
        //   // [Date.UTC(1970, 10, 27), 5.78],
        //   // [Date.UTC(1970, 10, 28), 5.78],
        //   // [Date.UTC(1970, 10, 29), 5.78],
        //   // [Date.UTC(1970, 10, 30), 5.78],
        // ],
        fillColor: { // 渐变效果
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, 'RGBA(255,199,138, 0.6)'],
            [1, 'RGBA(255,199,138, 0.01)'],
          ],
        },
      }],
      navigation: {
        buttonOptions: {
          enabled: false
        }
      },
    });
  },

  highchartsTheme() {
    const self = this;
    return {
      colors: ["RGBA(255,199,138, 0.3)", "RGBA(232, 18, 52, 0.15)"],
      area: {
        backgroundColor: this.bgcolor,
				fillColor: {
					linearGradient: {
						x1: 0,
						y1: 0,
						x2: 0,
						y2: 1
					},
					stops: [
						[0, Highcharts.getOptions().colors[0]],
						[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
					]
				},
				marker: {
					radius: 2
				},
				lineWidth: 1,
				states: {
					hover: {
						lineWidth: 1
					}
				},
				threshold: null
			}
    }
  },
}